<template>
	<view class="content">
		<tabbar class="tabbar" :dataArray="dataArray" :checkedIndex="checkedIndex" @handleIndexChange="typeChange">
		</tabbar>
		<scroll-view scroll-y="true" class="info" v-if="checkedIndex==0">
			<image class="head" src="../../static/total_img_banner@2x.png" mode="aspectFill"></image>
			<view class="text">
				<rich-text :nodes="html"></rich-text>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" class="info" v-if="checkedIndex==1" style="background: #fff;">
			<image class="head" src="../../static/total_img_banner@2x.png" mode="aspectFill"></image>
			<view class="title">基本信息</view>
			<view class="line">
				<view class="key">姓名</view>
				<input class="value" v-model="name" placeholder="请输入姓名" placeholder-class="placeholder" />
			</view>
			<view class="line">
				<view class="key">性别</view>
				<picker @change="bindPickerChange1" :value="sexIndex" :range="sexList">
					<input class="value" v-model="sex" placeholder="请选择性别" placeholder-class="placeholder" />
				</picker>
			</view>
			<view class="line">
				<view class="key">年龄</view>
				<input class="value" v-model="age" placeholder="请输入年龄" placeholder-class="placeholder" />
			</view>
			<view class="line">
				<view class="key">民族</view>
				<input class="value" v-model="minzu" placeholder="请输入民族" placeholder-class="placeholder" />
			</view>
			<view class="line">
				<view class="key">学历</view>
				<picker @change="bindPickerChange2" :value="xueliIndex" :range="xueliList">
					<input class="value" v-model="xueli" placeholder="请选择学历" placeholder-class="placeholder" />
				</picker>
			</view>
			<view class="line">
				<view class="key">专业</view>
				<input class="value" v-model="zhuanye" placeholder="请输入专业" placeholder-class="placeholder" />
			</view>
			<view class="line">
				<view class="key">就读学校或者单位</view>
				<input class="value" v-model="danwei" placeholder="请输入学校或者单位" placeholder-class="placeholder" />
			</view>
			<view class="line">
				<view class="key">职务</view>
				<input class="value" v-model="zhiwu" placeholder="请输入职务" placeholder-class="placeholder" />
			</view>
			<view class="line">
				<view class="key">身体状况</view>
				<input class="value" v-model="isHealthy" placeholder="请输入身体状况" placeholder-class="placeholder" />
			</view>
			<view class="line">
				<view class="key">政治面貌</view>
				<input class="value" v-model="mianmao" placeholder="请输入政治面貌" placeholder-class="placeholder" />
			</view>
			<view class="line">
				<view class="key">出生年月</view>
				<picker mode="date" :value="birth" :start="startDate" :end="endDate" @change="bindDateChange">
					<input class="value" v-model="birth" placeholder="请选择出生年月" placeholder-class="placeholder" />
				</picker>
			</view>
			<view class="line">
				<view class="key">宅电</view>
				<input class="value" v-model="tel" placeholder="请输入宅电" placeholder-class="placeholder" />
			</view>
			<view class="line">
				<view class="key">手机号</view>
				<input class="value" v-model="phone" placeholder="请输入手机号" placeholder-class="placeholder" />
			</view>
			<view class="line">
				<view class="key">邮箱</view>
				<input class="value" v-model="email" placeholder="请输入姓名" placeholder-class="placeholder" />
			</view>
			<view class="line">
				<view class="key">紧急联系人姓名</view>
				<input class="value" v-model="conect" placeholder="请输入紧急联系人姓名" placeholder-class="placeholder" />
			</view>
			<view class="line">
				<view class="key">紧急联系人号码</view>
				<input class="value" v-model="conectPhone" placeholder="请输入紧急联系人号码" placeholder-class="placeholder" />
			</view>
			<view class="line">
				<view class="key">身份证</view>
				<input class="value" v-model="card" placeholder="请输入身份证" placeholder-class="placeholder" />
			</view>
			<view class="title" style="margin-top: 80rpx;">其他信息</view>
			<view class="secTitle">1. 爱好技能及特长可多选</view>
			<view class="square">
				<view @click="changeStatus(0,index)" :class="item.status?'item checked':'item'"
					v-for="(item,index) in aihaoList">{{item.name}}</view>
			</view>
			<view class="secTitle">其他特长</view>
			<input class="square" v-model="other"
				style="border: 2rpx solid #999;padding: 20rpx;width: calc(100% - 120rpx);" />
			<view class="secTitle" style="margin-top: 80rpx;">2. 方便做志愿者的时间</view>
			<view class="square">
				<view @click="changeStatus(1,index)" :class="item.status?'item checked':'item'"
					v-for="(item,index) in shijianList">{{item.name}}</view>
			</view>
			<view class="secTitle">其他时间</view>
			<input class="square" v-model="otherTime"
				style="border: 2rpx solid #999;padding: 20rpx;width: calc(100% - 120rpx);" />
			<view class="secTitle" style="margin-top: 80rpx;">3. 志愿者服务经验</view>
			<input class="square" v-model="jingyan"
				style="border: 2rpx solid #999;padding: 20rpx;width: calc(100% - 120rpx);" />
			<view class="secTitle" style="margin-top: 80rpx;">4. 你申请当志愿者的原因</view>
			<input class="square" v-model="yuanyin"
				style="border: 2rpx solid #999;padding: 20rpx;width: calc(100% - 120rpx);" />
			<view class="secTitle" style="margin-top: 80rpx;">5. 你申请当志愿者的优势和你的付出</view>
			<input class="square" v-model="youshi"
				style="border: 2rpx solid #999;padding: 20rpx;width: calc(100% - 120rpx);" />

			<button class="apply" @click="submit">立即申请</button>
			<view class="buttom" @click="changeStatus(2)">
				<image :src="select?selectList[1]:selectList[0]"></image>
				<view class="text">我已经认真阅读了<text>《盐城市博物馆志愿者章程》</text>，确认自己认同并会遵守章程内容</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import tabbar from '../customer/tabbar.vue'
	import HTMLParser from '../../js_sdk/parse-html/html-parser.js'
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				html: '',
				checkedIndex: 0,
				dataArray: [
					"志愿者章程",
					"在线报名",
					"志愿者活动"
				],
				htmlString: '<p style="text-align: center; line-height: 2em;">    <span style="color: rgb(51, 51, 51); font-size: 18px;"><strong style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;">盐城市博物馆志愿者章程</strong></span><span style="color: rgb(51, 51, 51);"><strong style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;"></strong><br/></span></p><p style="text-align: center; line-height: 2em;">    <span style="font-size: 16px; font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: rgb(51, 51, 51);">&nbsp;<span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: rgb(51, 51, 51); font-size: 16px;"><strong><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: rgb(51, 51, 51); text-align: center;">第一章&nbsp;总则</span></strong></span></span></p><p style="text-indent: 35px; line-height: 1.75em;">    <span style="color: rgb(51, 51, 51); font-size: 16px;"><strong><span style="color: rgb(51, 51, 51); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 16px;">第一条</span></strong><span style="font-size: 16px; color: rgb(102, 102, 102);"><strong><span style="color: rgb(51, 51, 51); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 16px;">&nbsp;</span></strong><span style="color: rgb(102, 102, 102); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 16px;">为了推进博物馆建设，提升博物馆社会服务功能，弘扬志愿者精神，向志愿者提供实现社会价值和个人价值的多元舞台，促进社会和谐和人的全面发展，根据国家志愿者管理相关条例及我馆工作实际，特制定本章程。</span></span></span></p><p style="line-height: 1.75em; text-indent: 2em;">    <span style="color: rgb(51, 51, 51); font-size: 16px;"><strong><span style="color: rgb(51, 51, 51); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 16px;">第二条</span></strong><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 16px; color: rgb(102, 102, 102);"> 志愿者是指基于良知、信念和责任，不为物质报酬，志愿为社会和他人提供服务和帮助、具有奉献精神的人。盐城市博物馆吸收热爱博物馆事业，愿意在博物馆为公众服务的人士为本馆志愿工作者，共同实现传播祖国优秀海盐历史文化、服务社会大众的根本宗旨。</span></span></p><p style="text-indent: 29px; line-height: 1.75em;">    <span style="font-size: 16px;"><span style="font-size: 16px; color: rgb(51, 51, 51);"><strong><span style="color: rgb(51, 51, 51); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 16px;">第三条</span></strong></span><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 16px; color: rgb(102, 102, 102);">&nbsp;盐城市博物馆志愿者归盐城市博物馆开放部管理。</span></span></p><p style="text-align: center; line-height: 2em;">    <span style="color: rgb(51, 51, 51); font-size: 16px;"><strong><span style="color: rgb(51, 51, 51); font-size: 16px; font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;">第二章 志愿者工作者</span></strong><strong><span style="color: rgb(51, 51, 51); font-size: 16px; font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;"></span></strong></span></p><p style="text-align: left; text-indent: 2em; line-height: 1.75em;">    <span style="font-size: 16px;"><span style="font-size: 16px; color: rgb(51, 51, 51);"><strong><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 16px;">第四条</span></strong></span><span style="font-size: 16px; color: rgb(102, 102, 102);"><strong><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 16px;"></span></strong><strong><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 16px;"></span></strong></span><span style="font-size: 16px; color: rgb(51, 51, 51);"><strong><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 16px;"></span></strong><strong><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 16px;"></span></strong></span><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 16px; color: rgb(102, 102, 102);">&nbsp; 本馆志愿工作者需符合以下条件：</span></span></p><p style="text-align: left; text-indent: 2em; line-height: 1.75em;">    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: rgb(102, 102, 102); font-size: 16px;">一、年龄在18周岁以上，身心健康;</span></p><p style="text-align: left; text-indent: 2em; line-height: 1.75em;">    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: rgb(102, 102, 102); font-size: 16px;">二、热爱博物馆事业，具有博物馆或历史、考古的一般基础知识，能够使用普通话和规范用语；</span></p><p style="text-align: left; text-indent: 2em; line-height: 1.75em;">    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: rgb(102, 102, 102); font-size: 16px;">三、具有奉献精神，热心社会公益事业，愿意利用自己的业余时间无偿为公众提供服务；</span></p><p style="text-align: left; text-indent: 2em; line-height: 1.75em;">    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: rgb(102, 102, 102); font-size: 16px;">四、自愿服从《盐城市博物馆志愿者章程》；</span></p><p style="text-align: left; text-indent: 2em; line-height: 1.75em;">    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: rgb(102, 102, 102); font-size: 16px;">五、遵守博物馆的各项规章制度。</span></p><p style="text-align: left; text-indent: 2em; line-height: 1.75em;">    <span style="font-size: 16px;"><span style="font-size: 16px; color: rgb(51, 51, 51);"><strong><span style="color: rgb(51, 51, 51); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 16px;">第五条</span></strong></span><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 16px; color: rgb(102, 102, 102);"> 本馆志愿工作者的吸收与招聘：</span></span></p><p style="text-align: left; text-indent: 2em; line-height: 1.75em;">    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: rgb(102, 102, 102); font-size: 16px;">一、本馆根据工作需要，直接面向社会或通过有关单位、社会团体的推荐，招聘志愿工作者；</span></p><p style="text-align: left; text-indent: 2em; line-height: 1.75em;">    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: rgb(102, 102, 102); font-size: 16px;">二、本馆的志愿工作报名者与被推荐者必须经过本馆的考核，合格者方可接受招聘；</span></p><p style="text-align: left; text-indent: 2em; line-height: 1.75em;">    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: rgb(102, 102, 102); font-size: 16px;">三、博物馆常年接受报名，但招募时间集中为每年3月和11月，根据需要，择优录取。</span></p><p style="text-align: left; text-indent: 2em; line-height: 1.75em;">    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: rgb(102, 102, 102); font-size: 16px;">四、报名方式：1、在盐城市博物馆微信公众号填写《志愿者申请表》报名。2、在盐城市博物馆前台领取或从盐城市博物馆网站下载《志愿者申请表》，填写后交至盐城市博物馆办公室。</span></p><p style="text-indent: 0em; text-align: center; line-height: 2em;">    <span style="color: rgb(51, 51, 51); font-size: 16px;"><strong><span style="color: rgb(51, 51, 51); font-size: 16px; font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;">第三章 志愿者的工作与管理</span></strong><strong><span style="color: rgb(51, 51, 51); font-size: 16px; font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;"></span></strong></span></p><p style="text-indent: 2em; line-height: 1.75em;">    <span style="font-size: 16px;"><span style="font-size: 16px; color: rgb(51, 51, 51);"><strong><span style="color: rgb(51, 51, 51); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 16px;">第六条</span></strong></span><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 16px; color: rgb(102, 102, 102);">&nbsp; 本馆志愿工作者的工作期限一般为一年，时间从注册之日起计算。志愿者经本人申请并获准后可延长一年，延长次数不限。依据本人的意愿，亦可随时申明中断志愿工作。</span></span></p><p style="text-indent: 2em; line-height: 1.75em;">    <span style="font-size: 16px;"><span style="font-size: 16px; color: rgb(51, 51, 51);"><strong><span style="color: rgb(51, 51, 51); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 16px;">第七条</span></strong></span><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 16px; color: rgb(102, 102, 102);">&nbsp; 志愿工作者工作时间由盐城市博物馆与志愿者本人协商确定，一般每月工作三次，每次时间不少于两小时，工作时间变更，须经本馆同意。</span></span></p><p style="text-indent: 2em; line-height: 1.75em;">    <span style="font-size: 16px;"><span style="font-size: 16px; color: rgb(51, 51, 51);"><strong><span style="color: rgb(51, 51, 51); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 16px;">第八条</span></strong></span><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 16px; color: rgb(102, 102, 102);"> 志愿工作者工作时必须在胸前佩带本馆颁发的志愿者工作证。</span></span></p><p style="text-indent: 2em; line-height: 1.75em;">    <span style="font-size: 16px;"><span style="font-size: 16px; color: rgb(51, 51, 51);"><strong><span style="color: rgb(51, 51, 51); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 16px;">第九条</span></strong></span><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 16px; color: rgb(102, 102, 102);">&nbsp; 志愿工作者在本馆的服务工作中，必须使用普通话和规范用语，微笑服务，仪态端庄大方，注意礼节礼貌，不得与观众发生争执。</span></span></p><p style="text-indent: 2em; line-height: 1.75em;">    <span style="font-size: 16px;"><span style="font-size: 16px; color: rgb(51, 51, 51);"><strong><span style="color: rgb(51, 51, 51); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 16px;">第十条</span></strong></span><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 16px; color: rgb(102, 102, 102);">&nbsp; 志愿工作者必须将每次工作内容如实记入《盐城市博物馆志愿者工作手册》，并经本馆工作人员的确认，作为工作考核依据。</span></span></p><p style="text-indent: 2em; line-height: 1.75em;">    <span style="font-size: 16px;"><span style="font-size: 16px; color: rgb(51, 51, 51);"><strong><span style="color: rgb(51, 51, 51); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 16px;">第十一条</span></strong></span><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 16px; color: rgb(102, 102, 102);"> 工作表现优秀者定期予以表彰并记入手册。对连续为博物馆服务五年以上，且有突出贡献的志愿者可获得博物馆“名誉馆员”称号。</span></span></p><p style="text-indent: 2em; line-height: 1.75em;">    <span style="font-size: 16px;"><span style="font-size: 16px; color: rgb(51, 51, 51);"><strong><span style="color: rgb(51, 51, 51); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 16px;">第十二条</span></strong></span><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 16px; color: rgb(102, 102, 102);">&nbsp; 对表现消极、影响工作者，本馆将劝其退出志愿者组织；表现与志愿工作者身份不符、有损盐城市博物馆形象者，本馆将予以辞退，被辞退者不得再度成为本馆的志愿工作者。</span></span></p><p style="text-align: center; line-height: 2em;">    <span style="color: rgb(51, 51, 51); font-size: 16px;"><strong><span style="color: rgb(51, 51, 51); font-size: 16px; font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;">第四章 志愿者义务</span></strong><strong><span style="color: rgb(51, 51, 51); font-size: 16px; font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;"></span></strong></span></p><p style="text-indent: 2em; line-height: 1.75em;">    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: rgb(102, 102, 102); font-size: 16px;">第一条&nbsp; 遵守盐城市博物馆志愿者章程及管理制度；</span></p><p style="text-indent: 2em; line-height: 1.75em;">    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: rgb(102, 102, 102); font-size: 16px;">第二条&nbsp; 自觉遵守相关法律法规及志愿者组织的其它规定；</span></p><p style="text-indent: 2em; line-height: 1.75em;">    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: rgb(102, 102, 102); font-size: 16px;">第三条&nbsp; 自觉维护志愿者组织和志愿者的形象；</span></p><p style="text-indent: 2em; line-height: 1.75em;">    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: rgb(102, 102, 102); font-size: 16px;">第四条&nbsp; 履行志愿服务承诺，服从盐城市博物馆开放部的任务分配和安排；</span></p><p style="text-indent: 2em; line-height: 1.75em;">    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: rgb(102, 102, 102); font-size: 16px;">第五条&nbsp; 不损害志愿服务对象的合法权益，保守志愿服务对象的隐私；</span></p><p style="text-indent: 2em; line-height: 1.75em;">    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: rgb(102, 102, 102); font-size: 16px;">第六条&nbsp; 不得以志愿者身份从事任何以赢利为目的或违背社会公德的活动；</span></p><p style="text-indent: 2em; line-height: 1.75em;">    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: rgb(102, 102, 102); font-size: 16px;">第七条&nbsp; 准时出席所召开的会议。</span></p><p style="text-indent: 2em; line-height: 1.75em;">    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: rgb(102, 102, 102); font-size: 16px;">第八条&nbsp; &nbsp;国家法律、法规规定的其他义务。</span></p><p style="text-align: center; line-height: 2em;">    <span style="color: rgb(51, 51, 51); font-size: 16px;"><strong><span style="color: rgb(51, 51, 51); font-size: 16px; font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;">第五章 志愿者权利</span></strong><strong><span style="color: rgb(51, 51, 51); font-size: 16px; font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;"></span></strong></span></p><p style="text-indent: 2em; line-height: 1.75em;">    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: rgb(102, 102, 102); font-size: 16px;">第一条 参加盐城市博物馆的志愿服务活动</span></p><p style="text-indent: 2em; line-height: 1.75em;">    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: rgb(102, 102, 102); font-size: 16px;">第二条 接受相关知识和技能培训，使用盐城市博物馆提供的业务书籍及学习资料；</span></p><p style="text-indent: 2em; line-height: 1.75em;">    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: rgb(102, 102, 102); font-size: 16px;">第三条 凭志愿者工作证可免费参观本馆的专题展览；</span></p><p style="text-indent: 2em; line-height: 1.75em;">    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: rgb(102, 102, 102); font-size: 16px;">第三条 对海盐馆志愿者活动的工作进行监督，提出建议、批评和意见；</span></p><p style="text-indent: 2em; line-height: 1.75em;">    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: rgb(102, 102, 102); font-size: 16px;">第四条 打折购买本馆商店的商品及本馆出版物；</span></p><p style="text-indent: 2em; line-height: 1.75em;">    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: rgb(102, 102, 102); font-size: 16px;">第五条 退出盐城市博物馆志愿者队伍。</span></p><p style="text-indent: 2em; line-height: 1.75em;">    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: rgb(102, 102, 102); font-size: 16px;">第六条 国家法律、法规规定的其他权利</span></p><p style="text-align: center; text-indent: 0em; line-height: 2em;">    <span style="color: rgb(51, 51, 51); font-size: 16px;"><strong><span style="color: rgb(51, 51, 51); font-size: 16px; font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;">第六章 附则</span></strong><strong><span style="color: rgb(51, 51, 51); font-size: 16px; font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;"></span></strong></span></p><p style="text-indent: 28px; line-height: 1.75em;">    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: rgb(102, 102, 102); font-size: 16px;">第一条 本章程自发布之日起生效。</span></p><p style="text-indent: 28px; line-height: 1.75em;">    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; color: rgb(102, 102, 102); font-size: 16px;">第二条 本章程修改权和最终解释权归盐城市博物馆。</span></p><p>    <br/></p>',

				select: false,
				selectList: [
					'../../static/volunteer_selectbox_unselected@2x.png',
					'../../static/volunteer_selectbox_selected@2x.png'
				],

				name: '',

				sex: '',
				sexIndex: 0,
				sexList: ['女', '男'],

				age: '',
				minzu: '',

				xueli: '',
				xueliIndex: 0,
				xueliList: ['小学及以下', '初中', '高中', '大专', '本科', '硕士及以上'],

				zhuanye: '',
				danwei: '',
				zhiwu: '',
				isHealthy: '',
				mianmao: '',
				birth: '',
				tel: '',
				phone: '',
				email: '',
				conect: '',
				conectPhone: '',
				card: '',

				aihaoList: [{
					name: '医疗',
					status: 0
				}, {
					name: '教育',
					status: 0
				}, {
					name: '驾驶',
					status: 0
				}, {
					name: '计算机',
					status: 0
				}, {
					name: '法律',
					status: 0
				}, {
					name: '财务',
					status: 0
				}, {
					name: '摄影',
					status: 0
				}, {
					name: '文艺',
					status: 0
				}, {
					name: '外语',
					status: 0
				}, {
					name: '机械',
					status: 0
				}, {
					name: '其他',
					status: 0
				}],
				other: '',
				shijianList: [{
					name: '随时',
					status: 0
				}, {
					name: '每天下班后',
					status: 0
				}, {
					name: '周末/周日',
					status: 0
				}],
				otherTime: '',
				jingyan: '',
				yuanyin: '',
				youshi: '',
			}
		},
		onLoad() {
			this.html = this.parse(this.htmlString)
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			submit(){
				if(!this.select){
					uni.showToast({
						title:'请先阅读志愿者章程并勾选确认',
						icon:'none'
					})
					return
				}
				uni.showToast({
					title:'提交成功'
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			parse(str) {
				let list = new HTMLParser(str)
				return list
			},
			typeChange(index) {
				this.checkedIndex = index
			},
			bindPickerChange1: function(e) {
				this.sexIndex = e.target.value
				this.sex = this.sexList[this.sexIndex]
			},
			bindPickerChange2: function(e) {
				this.xueliIndex = e.target.value
				this.xueli = this.xueliList[this.xueliIndex]
			},
			bindDateChange: function(e) {
				this.birth = e.target.value
			},
			changeStatus(type, index) {
				let list = []
				if (type == 0) {
					for (let i in this.shijianList) {
						let item = this.shijianList[i]
						if (i == index) {
							item.status = item.status ? 0 : 1
						}
						list.push(item)
					}
					this.shijianList = list
				} else if (type == 1) {
					for (let i in this.aihaoList) {
						let item = this.aihaoList[i]
						if (i == index) {
							item.status = item.status ? 0 : 1
						}
						list.push(item)
					}
					this.aihaoList = list
				} else if (type == 2) {
					this.select = !this.select
				}
			}
		}
	}
</script>

<style>
	.content {
		position: fixed;
		width: 100%;
		height: calc(100% - 88rpx);
		background: #eee;
		display: flex;
		flex-direction: column;
	}

	.tabbar {
		background: #fff;
		border-bottom: #ddd solid 2rpx;
	}

	.info {
		height: calc(100% - 88rpx);
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}

	.info .text {
		margin: 20rpx;
		padding: 20rpx;
		width: calc(100% - 80rpx);
		background: #fff;
		line-height: 40rpx;
	}

	rich-text {
		line-height: 40rpx;
	}

	/* .pdf {
		position: fixed;
		top: 568rpx;
		left: 0;
		height: calc(100% - 568rpx);
		width: 100%;
		padding: 20rpx;
		color: #333;
	} */

	.info .head {
		width: 100%;
		height: 400rpx;
	}

	.title {
		width: 100%;
		font-weight: bold;
		text-align: center;
		font-size: 32rpx;
		color: #333;
		margin: 60rpx 0 50rpx 0;
	}

	.line {
		height: 80rpx;
		margin: 0 40rpx;
		border: 2rpx solid #999;
		border-radius: 10rpx;
		padding: 0 20rpx;
		width: calc(100% - 122rpx);
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin-bottom: 20rpx;
	}

	.line .key {
		line-height: 30rpx;
		font-size: 30rpx;
		color: #333;
		margin-right: 40rpx;
	}

	.line .value {
		width: 320rpx;
		font-size: 30rpx;
		color: #666;
	}

	.placeholder {
		color: #999;
	}

	.secTitle {
		padding: 0 40rpx;
		font-size: 28rox;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.square {
		width: calc(100% - 80rpx);
		margin: 0 40rpx;
		color: #666;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		margin-bottom: 20rpx;
	}

	.square .item {
		flex: 0 0 calc(33% - 42rpx);
		margin: 20rpx;
		font-size: 28rox;
		line-height: 80rpx;
		text-align: center;
		height: 80rpx;
		border-radius: 40rpx;
		border: 2rpx solid #B9AC90;
	}

	.checked {
		background: #B9AC90;
		color: #fff;
	}

	.apply {
		width: calc(100% - 80rpx);
		margin: 80rpx 40rpx 0rpx 40rpx;
		color: #fff;
		border-radius: 0;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		background: #AE6059;
	}

	.buttom {
		margin: 40rpx 40rpx 20rpx 40rpx;
		display: flex;
		align-items: flex-start;
	}

	.buttom image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;
	}

	.buttom .text {
		font-size: 24rpx;
		color: #999;
		line-height: 30rpx;
		padding: 0;
		margin: 0;
		width: calc(100% - 50rpx);
	}

	.buttom .text text {
		color: #007AFF;
	}
</style>
